<template>
  <!-- 404页面内容主体 -->
    <el-container id="404-error-page-content" class="error-page">
      <!-- 404页面 头部-->
      <el-header id="404-header-content">
        <!-- 404页面 异常数字 -->
        <h1 id="404-header-number">404</h1>
      </el-header>
      <!-- 404页面 主体内容 -->
      <el-main id="404-main-content">
        <!-- 404页面 消息内容主体 -->
        <div id="404-main-massage-content" class="error-message">
             <!-- 404页面 消息内容结果 -->
          <h2 id="404-main-massage-h2-result">页面未找到</h2>
            <!-- 404页面 消息内容提示 -->
          <p id="404-main-massage-p-info">抱歉，您访问的页面不存在。</p>
          <!-- 404页面 跳转按钮  已登录：首页  无登录：登录页 -->
          <el-button id="404-main-btn-handler" type="primary" @click="goHome">返回{{PageName}}</el-button>
        </div>
      </el-main>
    </el-container>
  </template>
   
  <script setup>
  import { ref,onMounted } from "vue";
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import {useLoginStore} from "@/store/login"

      const router = useRouter();
      const loginStore = useLoginStore();
      const toPage = ref("")
      const PageName = ref("")
      const goHome = () => {
        router.push({ path: toPage.value });
      };
      let role={
    "admin":{page:"/reportManagement",name:"报表统计页面"},
    "user":{page:"/userHome",name:"首页"}
        }
      onMounted(()=>{
        if(loginStore.isLoggedIn){
            toPage.value = role[loginStore.getUserRole].page  
            PageName.value= role[loginStore.getUserRole].name  
        }else{
            toPage.value ="/login"
            PageName.value="登录页"
        }
      })
  
  
  </script>
   
  <style scoped>
  .error-page {
    text-align: center;
    padding: 50px;
  }
   
  .error-page .el-header {
    margin-bottom: 20px;
  }
   
  .error-page .error-message {
    max-width: 600px;
    margin: 0 auto;
  }
   
  .error-page h1 {
    font-size: 100px;
    margin: 0;
    color: #f56c6c;
  }
   
  .error-page h2 {
    font-size: 24px;
    margin: 20px 0;
  }
   
  .error-page p {
    font-size: 16px;
    color: #666;
  }
   
  .error-page .el-button {
    margin-top: 20px;
  }
  </style>